<template>
  <div>
    <div class="userUpdate">
      <div style="margin: 4%">
        <h2>用户修改页面</h2>
        <el-form ref="userForm" :model="usersData" label-width="80px" style="margin-top: 20px">
          <el-form-item label="用户昵称">
            <el-input v-model="usersData.usersName" />
          </el-form-item>
          <el-form-item label="用户密码">
            <el-input v-model="usersData.usersPassword" />
          </el-form-item>
          <el-form-item label="用户头像">
            <el-upload :action="global.uploadUrl" :on-success="getFirstImage" :before-upload="beforeUpload">
              <el-button type="primary">点击上传头像</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="goUpdate()">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../../utils/request";

export default {
  name: "usersUpdate",
  data(){
    return{
      usersData:{
        usersName:"",
        usersPassword:"",
        usersPortrait:"",
      },
      allUserImage:[],
      submitState:false
    }
  },
  methods:{
    beforeUpload(file) {
      let testMsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testMsg === 'jpg'
      const extension2 = testMsg === 'png'
      const isLt2M = file.size / 1024 / 1024 < 2     //这里做文件大小限制
      if(!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 jpg、png格式!',
          type: 'warning'
        });
      }
      if(!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 2MB!',
          type: 'warning'
        });
      }
      return extension || extension2 && isLt2M
    },
    goUpdate(){
      this.usersData.usersFirstImage=null;
      this.usersData.usersLocation=null;
      this.usersData.usersIp=null;
      request.post('/users/update', this.usersData).then(res =>{
        if (res.code !== '200'){
          this.$message.error(res.msg)
          return
        }
        this.submitState=true
        localStorage.removeItem("userData");
        this.$message.success(res.msg)
        this.$router.push("/login")
      })
    },
    getFirstImage(res){
      this.usersData.usersPortrait=res.msg;
      if (this.global.recommendImg === "http://localhost:8080"){
        this.allImage.push(res.msg.substring(33))
      }else if (this.global.recommendImg === "https://www.tiehuplayer.xyz"){
        this.allImage.push(res.msg.substring(39))
      }
    }
  },
  created() {
    this.usersData=JSON.parse(localStorage.getItem("userData"))
  },
  mounted() {
    document.title="用户修改 - 贴乎";
  },
  destroyed() {
    if (this.allUserImage !== 0 && this.submitState === false){
      request.delete('/file/delete/?allImage='+this.allUserImage)
    }
  },
}
</script>

<style scoped>
.userUpdate{
  max-width: 600px;
  margin: auto;
  margin-top: 170px;
  border-radius: 5px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>